import React, { useState } from "react";
import {
  Form,
  Button,
  Input,
  InputNumber,
  Modal,
  Tooltip,
  message,
  Select,
} from "antd";
import type { FormProps } from "antd";
import styles from "./styles.module.less";
import { useMainStore } from "@/store/mainStore";
import { useShallow } from "zustand/react/shallow";
import { randomId } from "@/utils/utils";

const Header = () => {
  const [form] = Form.useForm();
  const [open, setOpen] = useState(false);

  const { coordList, currentCoordObj, currentHwnd } = useMainStore(
    useShallow((state) => ({
      coordList: state.coordList,
      currentCoordObj: state.currentCoordObj,
      currentHwnd: state.currentHwnd,
    }))
  );

  const onFormChange = (val: FormProps, val2: FormProps) => {
    // 当前改变的表单项的值
    console.log(val);
    // val2等同于form.getFieldsValue()，全字段
    // console.log("val2", val2);
    // console.log("form", form.getFieldsValue());
  };

  const onFinish: FormProps["onFinish"] = (values) => {
    console.log("success value:", values);
    useMainStore.setState({
      coordList: [
        {
          id: randomId(),
          ...values,
        },
        ...coordList,
      ],
    });
    // form.resetFields();
    setOpen(false);
  };

  return (
    <div>
      <Modal
        title="添加坐标"
        width={400}
        open={open}
        onCancel={() => {
          setOpen(false);
        }}
        okButtonProps={{ htmlType: "submit" }}
        destroyOnClose
        maskClosable={false}
        okText="确定"
        cancelText="取消"
        modalRender={(dom) => (
          <Form
            className={styles.addBox}
            layout="horizontal"
            form={form}
            labelCol={{ span: 5 }}
            onValuesChange={onFormChange}
            clearOnDestroy
            autoComplete="off"
            onFinish={onFinish}
          >
            {dom}
          </Form>
        )}
      >
        <Form.Item
          label="x坐标"
          name="x_coord"
          tooltip="地图右上角坐标第一个值"
          required
          rules={[{ required: true, message: "x坐标必填" }]}
        >
          <InputNumber placeholder="请输入" controls={false} />
        </Form.Item>
        <Form.Item
          label="y坐标"
          name="y_coord"
          tooltip="地图右上角坐标第二个值"
          required
          rules={[{ required: true, message: "y坐标必填" }]}
        >
          <InputNumber placeholder="请输入" controls={false} />
        </Form.Item>
        <Form.Item
          label="z坐标"
          name="z_coord"
          tooltip="地形高度"
          required
          rules={[{ required: true, message: "z坐标必填" }]}
        >
          <InputNumber placeholder="请输入" controls={false} />
        </Form.Item>
        <Form.Item label="备注" name="desc">
          <Input />
        </Form.Item>
      </Modal>
      <div className={styles.addBtns}>
        <Button
          type="primary"
          onClick={() => {
            setOpen(true);
          }}
        >
          手动添加
        </Button>
        <Button
          color="default"
          variant="outlined"
          htmlType="button"
          disabled={!currentHwnd}
          onClick={() => {
            useMainStore.setState({
              coordList: [
                {
                  id: randomId(),
                  x_coord: currentCoordObj.x,
                  y_coord: currentCoordObj.y,
                  z_coord: currentCoordObj.z,
                  desc: "",
                  hotkey: "",
                },
                ...coordList,
              ],
            });
          }}
        >
          添加当前坐标
        </Button>
        {/* <Tooltip
          color="red"
          placement="top"
          title={currentHwnd ? "先在地图上右键标个点 再使用该功能" : ""}
        >
          <Button
            color="default"
            variant="outlined"
            htmlType="button"
            disabled={!currentHwnd}
            onClick={() => {
              console.log("添加标点坐标");
              message.warning("功能未开发");
            }}
          >
            添加标点坐标
          </Button>
        </Tooltip> */}
      </div>
    </div>
  );
};

export default Header;
